<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">售后信息</block>
		</cu-custom>
		<view class="bg-white margin radius">
			<!-- <view class="cu-form-group">
				<view class="title">买家姓名</view>
				<input placeholder-class="input-holder" placeholder="请输入收货人姓名" v-model="formData.receiver_name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input placeholder-class="input-holder" placeholder="请输入手机号码" v-model="formData.receiver_mobile"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">所在地区</view>
				<cityPicker ref="cityPicker"></cityPicker>
			</view> -->

		</view>
		
		
		<view class="whole-box" v-if="detail">
			<view class="table-box">
				<view class="goods">
					<image :src="detail.product_picture"></image>
					<view class="info">
						<text class="name">{{detail.product_name}}</text>
						<text class="spec">数量：{{detail.num}}</text>
						<text class="spec" v-if="detail.sku_name != ''">规格：{{detail.sku_name}}</text>
					</view>
				</view>
			
				<!-- <view v-if="item.customer && item.customer != null && item.customer.refund_status > 0"  class="re-btn" @tap="goPage('/pages/shop/order/refound?orderid='+item.order_id + '&orderproid='+item.id )">查看售后</view> -->
				<!-- <view v-else class="re-btn" @tap="goPage('/pages/shop/order/refound?orderid='+item.order_id + '&orderproid='+item.id )">我要退货</view> -->
				
			</view>
		</view>
		<view class="bg-white margin-lr radius">
			<view class="cu-form-group">
				<view class="title">退款金额：</view>
				<input placeholder-class="input-holder"  placeholder="请输入收货人姓名" v-model="formData.refund_require_money" disabled="true"></input>
			</view>
		</view>
		<view class="bg-white margin-lr radius">
			<view class="cu-form-group align-start">
				<view class="title">退款原因：</view>
				<textarea placeholder-class="input-holder" maxlength="-1" v-model="formData.refund_reason" placeholder="输入退款原因"
				 class="text-right"></textarea>
			</view>
		</view>
		
		<view class="cu-form-group margin-lr">
			<view class="cu-form-group align-start">
				<view class="title">退货方式：</view>
				<radio-group class="block" @change="RadioChange" style="margin-top: 10px;">
					<!-- <radio v-if="detail && detail.jdOrderId != ''" class="margin-right" :class="formData.shipping_type=='1'?'checked':''" :checked="formData.shipping_type=='1'?true:false"
					 value="1">上门取件</radio> -->
					<radio  v-if="detail" class="margin-right" :class="formData.shipping_type=='2'?'checked':''" :checked="formData.shipping_type=='2'?true:false"
					 value="2">自行寄回</radio>
				</radio-group>
			</view>
		</view>
		
		<view class="bg-white margin radius" v-if="refund_status >= 2 && formData.shipping_type == 2">
			<view class="cu-form-group margin-lr">
				<view class="title" style="color: red;">已通过审核，填写物流信息</view>
			</view>
			<view class="cu-form-group margin-lr">
				<view class="title">商家地址</view>
				<textarea placeholder-class="input-holder" maxlength="-1"  v-model="order.config.merchant_address"
				 class="text-right" disabled="true"></textarea>
			</view>
			<view class="cu-form-group margin-lr">
				<view class="title">商家名字</view>
				<input placeholder-class="input-holder"  v-model="order.config.merchant_name" disabled="true"></input>
			</view>
			<view class="cu-form-group margin-lr">
				<view class="title">商家手机号码</view>
				<input placeholder-class="input-holder"  v-model="order.config.merchant_mobile" disabled="true"></input>
			</view>
			<view class="cu-form-group margin-lr">
				<view class="title">物流单号</view>
				<input placeholder-class="input-holder" placeholder="请输入物流单号" v-model="wlData.refund_shipping_code"></input>
			</view>
			<view class="cu-form-group margin-lr">
				<view class="title">物流公司</view>
				<input placeholder-class="input-holder" placeholder="请输入物流公司" v-model="wlData.refund_shipping_company"></input>
			</view>
		</view>
		
		
		
		<view class="margin-xl">
			<view class="cu-btn w100  round lg":class="['bg-'+theme]"  @tap="onSubmit" v-if="refund_status == 0 || refund_status == -2">确认提交</view>
			<view class="cu-btn w100  round lg":class="['bg-'+theme]"  @tap="onSubmit" v-if="refund_status == -3">被驳回，重新申请</view>
			
			<view class="cu-btn w100  round lg bg-black" v-if="refund_status == 1">退货申请中...</view>
			<view class="cu-btn w100  round lg":class="['bg-'+theme]" v-if="refund_status == 2" @tap="onSubmitFind">申请退货</view>
			<view class="cu-btn w100  round lg":class="['bg-'+theme]" v-if="refund_status == 3" >申请成功，自行退货</view>
			<view class="cu-btn w100  round lg":class="['bg-'+theme]"  @tap="closeSubmit" v-if="refund_status > 0 && refund_status < 3" style="margin-top: 10px;">取消申请</view>
			<view class="cu-btn w100  round lg":class="['bg-'+theme]" v-if="refund_status == 4" >退货成功，待商家退款</view>
			<view class="cu-btn w100  round lg":class="['bg-'+theme]" v-if="refund_status == 5" >已完成售后</view>
		</view>
		<view class="tips" style="color:red;height: 100px;" v-if="refund_status == 0 || refund_status == -2">售后信息请谨慎填写，一旦填写提交不能更改</view>
		<view class="tips" style="color:red;height: 100px;" v-if="refund_status == 1 && formData.shipping_type == 1">申请上门取件，24小时内请等待售后人员上门收件，填写资料一定要真实，注意接听电话</view>
		<view class="tips" style="color:red;height: 100px;" v-if="refund_status == 1 && formData.shipping_type == 2">售后信息请谨慎填写，一旦填写提交不能更改，等待商家审核</view>
	</view>
</template>

<script>
	import cityPicker from '@/components/shop/cityPicker.vue'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				txt: '请选择',
				title: 'Hello',
				province_id: "0",
				city_id: "0",
				area_id: "0",
				ress_id: "0",
				formData: {
					id:0,
					order_id:0,
					receiver_name: '',
					receiver_mobile: '',
					receiver_address: '',
					refund_reason:'',
					shipping_type:1,
					refund_type:2,
					refund_require_money:0
				},
				
				wlData:{
					id:0,
					refund_shipping_company:'',
					refund_shipping_code:''
				},
				refund_status:0,
				
				id: 0,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				detail:null,
				order_product_id:0,
				order:null
			}
		},
		onLoad(options) {
			if (options.orderproid) {
				this.order_product_id = options.orderproid;
			}
			if (options.orderid) {
				this.id = options.orderid
				this.formData.order_id = options.orderid
				// this.getDetail()
				
				let location = this.$common.getCache('location')
				console.log(location)
				if (location) {
					this.location = location
				}
			} else {
				if (!options.orderid) {
					this.$common.showErrorModal('参数有误')
					return
				}
				this.$nextTick((r) => {
					this.$refs.cityPicker.setSelect({
						provinces_id: 0,
						city_id: 0,
						area_id: 0,
						ress_id: 0,
					})
				})
			}
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			RadioChange(e) {
				this.formData.shipping_type = e.detail.value
			},
			getDetail(){
				let param = {
					id: this.id,
					order_product_id:this.order_product_id
				}
				if (this.location) {
					param.lng = this.location.longitude
					param.lat = this.location.latitude
				}
				uni.showLoading({
					title: '加载中...'
				})
				
				this.$http
					.get('refund_detail', param)
					.then((response) => {
						this.detail = response.data.data.orderProduct
						this.order = response.data.data.order
						
						this.formData.id = this.order_product_id
						this.wlData.id = this.order_product_id
						this.formData.receiver_name = this.detail.receiver_name
						this.formData.receiver_mobile = this.detail.receiver_mobile
						this.formData.receiver_address = this.detail.receiver_address
						this.formData.refund_require_money = this.detail.product_money
						// this.detail.config.merchant_address = '广东省广州市天河区车陂街道大塘街5号点大大声道'
						if (this.order.customer && this.order.customer != '') {
							console.log(this.order.customer[0])
							this.formData.refund_reason = this.order.customer[0].refund_reason
							this.formData.shipping_type = this.order.customer[0].shipping_type
							this.refund_status = this.order.customer[0].refund_status
							if (this.order.customer[0].refund_shipping_company != 0) {
								this.wlData.refund_shipping_company = this.order.customer[0].refund_shipping_company
							}
							this.wlData.refund_shipping_code = this.order.customer[0].refund_shipping_code
							
							
						}
						
						// this.$nextTick((r) => {
						// 	this.$refs.cityPicker.setSelect({
						// 		provinces_id: parseInt(this.detail.receiver_province),
						// 		city_id: parseInt(this.detail.receiver_city),
						// 		area_id: parseInt(this.detail.receiver_area),
						// 		ress_id: parseInt(this.detail.receiver_ress),
						// 	})
						// })
						if (response.data.data.jdOrderId == '' || response.data.data.jdOrderId == null) {
							
							this.formData.shipping_type = 2;
							
							
						} 
						uni.hideLoading()
						// if (this.detail.result == null || this.detail.result.length == 0 ) {
						// 	this.$common.showErrorModal('售后有误')
						// 	return
						// }
						
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
					})
			},
			closeSubmit(){
				uni.showLoading({
					title: '加载中...'
				})
				
				let formData = this.formData;
				this.$http
					.post('close_return', formData)
					.then((response) => {
						console.log(response)
						
						uni.hideLoading()
						this.$common.showSuccess('提交成功', function() {
							
						})
						this.getDetail()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			onSubmitFind(){
				let wlData = this.wlData
				
				if (!wlData.refund_shipping_company.trim()) {
					this.$common.showError('请填写物流公司')
					return
				}
				if (!wlData.refund_shipping_code.trim()) {
					this.$common.showError('请填写物流单号')
					return
				}
				
				uni.showLoading({
					title: '加载中...'
				})
				
				
				this.$http
					.post('sales_return', wlData)
					.then((response) => {
						console.log(response)
						
						uni.hideLoading()
						this.$common.showSuccess('提交成功', function() {
							
						})
						this.getDetail()
					})
					.catch((response) => {
						console.log(response)
					})
				
				
			},
			
			onSubmit(e) {
				let formData = this.formData

				// if (!formData.receiver_name.trim()) {
				// 	this.$common.showError('收货人姓名不能为空')
				// 	return
				// }
				
				// if (!(/^1(2|3|4|5|6|7|8|9)\d{9}$/.test(formData.receiver_mobile))) {
				// 	this.$common.showError('请输入正确的手机号')
				// 	return
				// }
				// if (!this.province_id || !this.city_id || !this.area_id) {
				// 	this.$common.showError('请选择所在地区')
				// 	return
				// }
				// if (!formData.receiver_address.trim()) {
				// 	this.$common.showError('详细地址不能为空')
				// 	return
				// }
				// if (!formData.refund_reason.trim()) {
				// 	this.$common.showError('描述不能为空')
				// 	return
				// }
				// let select = this.$refs.cityPicker.getSelect()
				// formData.receiver_province = select.provinces_id
				// formData.receiver_city = select.city_id
				// formData.receiver_area = select.area_id
				// formData.receiver_ress = select.ress_id
				console.log(formData)
				let id = this.id
				uni.showLoading({
					title: '加载中...'
				})
				
				
				this.$http
					.post('refund_create', formData)
					.then((response) => {
						console.log(response)
						
						uni.hideLoading()
						this.$common.showSuccess('提交成功', function() {
							
						})
						this.getDetail()
					})
					.catch((response) => {
						console.log(response)
					})
				
			}
		}
	}
</script>

<style>
	.table-box{
		margin: 20rpx 20rpx 0;
		background-color: #FFFFFF;
		padding: 32rpx 18rpx;
		border-radius: 16rpx;
		height: 230rpx;
	}
	.table-box .goods{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.table-box .goods image{
		width: 102rpx;
		height: 102rpx;
		margin-right: 18rpx;
		border-radius: 6rpx;
		flex-shrink: 0;
	}
	.table-box .goods .info{
		flex: 1;
		height: 102rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.table-box .goods .info .name{
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	.table-box .goods .info .spec{
		font-size: 26rpx;
		color: #999999;
	}
	
	.table-box .star-line{
		margin-top: 40rpx;
		display: flex;
		align-items: center ;
	}
	.star-line text{
		font-size: 26rpx;
		color: #999999;
	}
	.star-line text.bold{
		font-size: 30rpx;
		color: #333333;
	}
	.star-line .star{
		width: 300rpx;
		margin: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.star-line .star image{
		width: 42rpx;
		height: 40rpx;
	}
	
		
	.re-btn{
		margin-top: 10px;
		    /* text-align: right; */
		    font-size: 15px;
		    /* color: #333333; */
		    width: 100px;
		    height: 30px;
		    background: #f22a4f;
		    text-align: center;
		    line-height: 30px;
		    border-radius: 20px;
		    color: #fff;
		    float: right;
	}
	
	.reply-box .note{
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}
	.reply-box .reply{
		margin-top: 16rpx;
		font-size: 26rpx;
		color: #666666;
		line-height: 36rpx;
	}
	.reply-box .reply text{
		color: #333333;
		font-weight: bold;
	}
	
	.text-content{
		width: 100%;
		height: 130rpx;
		margin-top: 40rpx;
		line-height: 36rpx;
	}
	.text-content textarea{
		width: 100%;
		height: 100%;
	}
	.text-placeholder{
		font-size: 26rpx;
		color: #B9B8B8;
	}
	
	.submit-btn{
		margin: 40rpx auto 10rpx;
		width: 70%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
	}
</style>


<style>
	.white-box {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		padding: 0rpx 36rpx;
		border-radius: 5rpx;
		background-color: #FFFFFF;
	}

	.white-box .cu-form-group {
		padding: 0;
	}

	.cu-form-group .title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.cu-form-group .picker {
		color: #CACACA;
		font-size: 30rpx;
	}

	.cu-form-group picker {
		margin-right: 0;
		padding-right: 20rpx;
		text-align: right;
	}

	.cu-form-group .input-holder {
		text-align: right;
		color: #CACACA;
		font-size: 30rpx;
	}

	.cu-form-group input {
		text-align: right;
	}

	.cu-form-group textarea {
		height: 95px;
	}

	button {
		width: 576rpx;
		margin: 180rpx 92rpx 20rpx;
	}

	.tips {
		width: 678rpx;
		margin: 0 36rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #C9C9C9;
		line-height: 45rpx;
		text-align: center;
	}
</style>
